<template>
  <div class="change-email">
    <div class="wrap">
      <m-step :steps="steps" :active="active" />
    </div>
    <div class="content">
      <div class="input-area with-cover" v-if="active === 0">
        <Form
          :model="formData"
          ref="form"
          label-position="left"
          label-width="120px"
        >
          <Row>
            <Col>
              <img src="~/assets/images/security-email.png" class="icon" />
              <form-item
                label="邮箱："
                prop="email"
                :rules="[
                  {
                    required: true,
                    message: '请输入邮箱地址',
                    trigger: 'blur'
                  },
                  {
                    type: 'email',
                    message: '请输入正确的邮箱地址',
                    trigger: ['blur', 'change']
                  }
                ]"
              >
                <Input
                  v-model="formData.email"
                  type="text"
                  placeholder="请输入邮箱地址"
                />
              </form-item>
            </Col>
          </Row>

          <Row>
            <Col :span="17">
              <img
                src="~/assets/images/security-send-verification-code.png"
                alt=""
                class="icon"
              />
              <form-item
                label="邮箱验证码："
                prop="sms_code"
                :rules="[
                  {
                    required: true,
                    message: '邮箱验证码不能为空',
                    trigger: 'blur'
                  }
                ]"
              >
                <Input
                  v-model="formData.sms_code"
                  type="email"
                  placeholder="请输入邮箱验证码"
                />
              </form-item>
            </Col>
            <Col :span="7">
              <button
                type="button"
                class="send f13 ml10"
                :disabled="flag"
                @click="getEmailCode"
              >
                {{ content }}
              </button>
            </Col>
          </Row>

          <Row>
            <Col :span="16">
              <img
                src="~/assets/images/security-verification-code.png"
                alt=""
                class="icon"
              />
              <form-item label="验证码：" prop="img_code">
                <Input
                  v-model="formData.img_code"
                  type="text"
                  placeholder="请输入验证码"
                />
              </form-item>
            </Col>
            <Col :span="8">
              <div class="yzmBox">
                <img
                  :src="ImgCaptcha"
                  class="objectCover cursor"
                  @click="imgCaptcha"
                />
              </div>
            </Col>
          </Row>

          <Row type="flex" justify="space-around">
            <Col :span="12">
              <div class="submit" @click="submit">提交</div>
            </Col>
          </Row>
        </Form>
      </div>

      <div class="success" v-else-if="active === 1">
        <img src="~/assets/images/change-success.png" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import { Col, Form, FormItem, Input, Row, Step, Steps } from "element-ui";
import MStep from "@/components/common/m-step/MStep";
import { updateEmail, getImgCaptcha, getEmailCodeApi } from "@/request/api";

export default {
  name: "ChangeEmail",
  components: { Step, Steps, MStep, Form, Row, Col, FormItem, Input },
  data() {
    return {
      active: 0,
      steps: [{ title: "绑定邮箱" }, { title: "修改成功" }],
      formData: {},
      rules: {},
      ImgCaptcha: "",
      content: "发送验证码",
      totalTime: 60,
      flag: false
    };
  },
  created() {
    this.imgCaptcha();
    this.formData.phone = this.userInfo.phone;
  },
  computed: mapState(["userInfo"]),
  methods: {
    ...mapMutations(["setUserInfo"]),
    getEmailCode() {
      getEmailCodeApi({
        email: this.formData.email
      }).then(res => {
        if (res.status === 200) {
          this.flag = true;
          this.$toastVant.success(res.message);
          this.content = this.totalTime + "s后重新发送";
          let clock = window.setInterval(() => {
            this.totalTime--;
            this.content = this.totalTime + "s后重新发送";
            if (this.totalTime < 0) {
              window.clearInterval(clock);
              this.content = "重新发送";
              this.totalTime = 60;
              this.flag = false;
            }
          }, 1000);
        } else {
          this.$toastVant.show(res.message, 1000, false);
        }
      });
    },
    imgCaptcha() {
      getImgCaptcha().then(res => {
        this.ImgCaptcha = res.data.captcha;
        this.formData.key = res.data.key;
      });
    },
    submit() {
      let that = this;
      this.$refs.form.validate(res => {
        if (!res) return;
        const params = {
          email: that.formData.email,
          sms_code: that.formData.sms_code,
          img_code: that.formData.img_code
        };
        updateEmail(params).then(res => {
          if (res.status === 200) {
            var info = that.userInfo;
            info.email = that.formData.email;
            that.setUserInfo(info);
            that.active = 1;
          }
        });
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@import "~@/assets/style/common.scss";
@import "~@/assets/style/cover.scss";

.change-email {
  background-color: #fff;
  padding-top: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;

  .wrap {
    width: 500px;
    margin-bottom: 40px;
  }

  .content {
    margin-bottom: 120px;
    .yzmBox {
      width: 100%;
      padding-left: 10px;
      height: 40px;
    }
    .input-area {
      width: 400px;

      ///deep/ .el-form-item__label:before {
      //  display: inline;
      //  content: url("~@/assets/images/security-old-pwd.png");
      //  position: absolute;
      //  left: -10px;
      //}

      /deep/ .el-col {
        .icon {
          position: absolute;
          left: -25px;
          bottom: 55%;
        }
      }

      .send {
        width: 100px;
        height: 40px;
        border-radius: 10px;
        background-color: $theme-color-1;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        cursor: pointer;
      }
      .send:disabled {
        background: #aaa;
      }
      .submit {
        width: 200px;
        height: 40px;
        border-radius: 10px;
        background-color: $theme-color-1;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        margin-top: 80px;
        margin-bottom: 200px;
        cursor: pointer;
      }
    }

    .success {
      padding-top: 40px;
      margin-bottom: 200px;
    }
  }
}
</style>
